<template>

  <!--头: 引入 CommonHead 子组件-->
  <header class="register-head">
    <CommonHead title="用户注册"/>
  </header>

  <!--体: 注册表单-->
  <section class="register-body">
    <van-divider dashed>注册一个新账号</van-divider>
    <!--表单: 提交表单时触发-->
    <van-form @submit="register">
      <!--单元格: 卡片风格-->
      <van-cell-group inset>
        <!--单元格项: 双绑对应的表单数据，双绑对应的表单校验规则，背景提示字，右侧图标，可清除，不提示-->
        <van-field v-model="formData['username']" :rules="formRule['username']"
                   placeholder="请输入登录账号" right-icon="user-o" clearable autocomplete="off"/>
        <van-field v-model="formData['password']" :rules="formRule['password']" type="password"
                   placeholder="请输入登录密码" right-icon="shield-o" clearable autocomplete="off"/>
        <van-field v-model="formData['confirm']" :rules="formRule['confirm']" type="password"
                   placeholder="请再次输入密码" right-icon="shield-o" clearable autocomplete="off"/>
        <van-field v-model="formData['phone']" :rules="formRule['phone']" type="tel"
                   placeholder="请输入手机号码" right-icon="phone-o" clearable autocomplete="off"/>
        <van-field v-model="formData['realName']" :rules="formRule['realName']"
                   placeholder="请输入真实姓名" right-icon="font-o" clearable autocomplete="off"/>
        <van-field v-model="formData['idCard']" :rules="formRule['idCard']"
                   placeholder="请输入身份证号" right-icon="idcard" clearable autocomplete="off"/>
      </van-cell-group>
      <!--操作区: 注册按钮-->
      <article class="operation">
        <!--提交按钮: 圆角，区块，主要蓝，提交功能-->
        <van-button round block type="primary" native-type="submit">注册</van-button>
        <br/>
        <!--间距-->
        <van-space size="30px">
          <span @click="router.push('/LoginByAccount')">账号密码登录</span>
          <span @click="router.push('/loginByPhone')">手机号码登录</span>
        </van-space>
      </article>
    </van-form>
  </section>
</template>

<script setup>

import CommonHead from "@/components/CommonHead";
import {REGISTER} from '@/api/user';
import {reactive, shallowReactive} from "vue";
import router from "@/router";
import {showFailToast, showSuccessToast} from "vant";
import {SUCCESS, SUCCESS_CODE} from "@/constant";

/* ==================== data ==================== */

// data: 表单数据对象
let formData = shallowReactive({
  'username': '',
  'password': '',
  'confirm': '',
  'phone': '',
  'realName': '',
  'idCard': ''
});

// data: 表单校验规则
let formRule = reactive({
  username: [
    {required: true, message: '账号不能为空'},
    {pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{4,16}$/, message: '账号长度在4-16个字符'}
  ],
  password: [
    {required: true, message: '密码不能为空'},
    {pattern: /^\w{4,16}$/, message: '密码长度在4-16个字符'}
  ],
  confirm: [
    {required: true, message: '确认密码不能为空'},
    {validator: (value) => value === formData.password, message: '两次密码不一致'}
  ],
  phone: [
    {required: true, message: '手机号码不能为空'},
    {pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号码格式不正确'}
  ],
  realName: [
    {required: true, message: '真实姓名不能为空'},
    {pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,5}$/, message: '真实姓名长度在2-5个字符'}
  ],
  idCard: [
    {required: true, message: '身份证号码不能为空'},
    {pattern: /^\d{17}[X|0-9]$/, message: '身份证号格式不正确'}
  ],
});

/* ==================== method ==================== */

// method: 用户注册
function register(){
  // 同步调用注册接口
  REGISTER(formData).then(result => {
        let resp = result['data'];
        // 注册成功，跳转到LoginByUsername组件
        if (resp.code === SUCCESS) {
          showSuccessToast("注册成功")
          router.push("/LoginByAccount");
        } else {
          showFailToast(resp.message + ': ' + resp.data);
        }
      }
  ).catch(err => console.error(err));
}

</script>

<style scoped lang="scss">
.register-body {
  /*操作区*/
  .operation {
    margin: 15px; // 外边距
  }
}
</style>